.page {
  position: relative;
  width: 100%;

  /* 顶部导航栏区域 start */
  .navbar {
    position: relative;
    width: 100%;
    height: 100%;
    // padding: 0rpx 30rpx;
    display: flex;
    align-items: center;

    /* logo */
    &__logo {
      flex-grow: 0;
      flex-shrink: 0;
      width: 56rpx;
      height: 56rpx;
      border-radius: 50%;
      background-color: var(--tn-color-gray-light);

      .image {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
    }

    /* 搜索框 start */
    .search-box {
      flex: 1;
      margin-left: 24rpx;
      height: 64rpx;
      max-height: 100%;
      border-radius: 50rpx 50rpx 0rpx 50rpx;
      display: flex;
      align-items: center;
      // padding: 0rpx 30rpx;
      line-height: 1;

      &__icon {
        font-size: 32rpx;
      }
      &__tips {
        font-size: 24rpx;
        margin-left: 16rpx;
      }
    }
    /* 搜索框 end */
  }
  /* 顶部导航栏区域 end */

  /* 顶部轮播图 start */
  .top-swiper {
    position: relative;
    width: 100%;
    height: 480rpx;

    .swiper-item {
      position: relative;
      width: 100%;
      height: 100%;
    }
  }
  /* 顶部轮播图 end */

  /* 通知 start */
  .notice-bar {
    width: 100%;
    padding: 10rpx 0rpx 0rpx 0rpx;
  }
  /* 通知 end */

  .sub-page-container {
    position: relative;
    width: 100%;
    padding: 30rpx 30rpx 0rpx 30rpx;

    /* 分类 start */
    .category-container {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .item-icon {
          position: relative;
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 66rpx;
          color: #fff;
          z-index: 2;

          &::after {
            z-index: 1;
          }

          .icon {
            line-height: 1;
            z-index: 2;
          }
        }

        .item-name {
          margin-top: 16rpx;
          color: var(--tn-color-gray-dark);
        }
      }
    }
    /* 分类 end */

    /* 广告胶囊 start */
    .ad-capsule {
      position: relative;
      width: 100%;
      margin-top: 34rpx;
    }
    /* 广告胶囊 end */

    /* 热门案例 start */
    .hot-case-container {
      position: relative;
      // width: calc(100% - 50rpx);
      // margin: 0 auto;
      width: 100%;
      margin-top: 50rpx;

      .content-wrapper {
        margin-top: 40rpx;
        width: 100%;
        height: 340rpx;
        display: flex;
        justify-content: space-between;

        .image {
          width: 100%;
          height: 100%;
          border-radius: 12rpx;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;

          &::before {
            z-index: -1;
          }
        }

        .left {
          width: 60%;
          height: 100%;
        }

        .right {
          width: calc(100% - 60% - 30rpx);
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .right-item {
            width: 100%;
            height: calc(100% / 2 - 15rpx);
          }
        }
      }
    }
    /* 热门案例 end */

    /* 关于我们 start */
    .about {
      margin-top: 60rpx;

      .content-wrapper {
        margin-top: 40rpx;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .content-item {
          position: relative;
          width: calc(100% / 2 - 15rpx);
          margin-bottom: 30rpx;
          border-radius: 12rpx;
          padding: 40rpx 10rpx 40rpx 34rpx;
          display: flex;
          justify-content: space-between;
          line-height: 1;
          z-index: 2;

          &::after {
            z-index: 1;
          }

          .left {
            z-index: 2;
            .title {
              font-size: 36rpx;
              color: #fff;
            }
            .show-more {
              margin-top: 32rpx;
              font-size: 26rpx;
              color: rgba(255, 255, 255, 0.6);
              text {
                margin-right: 8rpx;
              }
            }
          }

          .icon {
            z-index: 2;
            font-size: 100rpx;
            margin-top: -16rpx;
            color: #fff;
            opacity: 0.3;
          }
        }
      }
    }
    /* 关于我们 end */
  }
}
